<html>

<head>
    <title>paho JS Example</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>

    <script type="text/javascript">
        var mqttClient = new Paho.MQTT.Client("localhost", 80, "/mqtt", "pahoJS_client");
        mqttClient.onConnectionLost = onConnectionLost;
        mqttClient.onMessageArrived = onMessageArrived;
        mqttClient.connect({ onSuccess: onConnect });

        function onConnect() {
            console.log("MQTT client connected");
            mqttClient.subscribe("pahoJS_subscription");
        }

        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
            }
        }

        function onMessageArrived(message) {
            console.log("onMessageArrived:" + message.payloadString);
        }
        function buttonClick() {
            message = new Paho.MQTT.Message("Hello");
            message.destinationName = "pahoJS_topic";
            mqttClient.send(message);
        }
    </script>

</head>

<body>
    <button onclick="buttonClick()">Publish</button>
</body>

</html>